<template>
  <el-tooltip effect="dark" :content="state.isScreenfull ? '退出全屏' : '全屏'" placement="bottom">
    <div class="header-icon screenfull" @click="handleScreenfull">
      <el-icon :size="34">
        <component :is="!state.isScreenfull ? 'FullScreen' : 'Plus'"></component>
      </el-icon>
    </div>
  </el-tooltip>
</template>
<script lang="ts" setup>
import screenfull from 'screenfull'
import { reactive } from 'vue'

const state = reactive({
  isScreenfull: false as boolean
})
/**
 * @desc:设置||退出全屏
 * @param {*}
 * @return {*}
 */
const handleScreenfull = () => {
  screenfull.toggle()
  if (!state.isScreenfull) {
    return false
  }
  screenfull.toggle()
}
/**
 * @desc: 监听浏览器全屏变化
 * @param {*}
 * @return {*}
 */
const handleScreenfullChange = () => {
  state.isScreenfull = !state.isScreenfull
}
screenfull.on('change', handleScreenfullChange)
</script>

<style lang="scss">

</style>
